<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>代码清单1-7 / 实现绘制一个圆形</title>
	</head>
	<body>
		<canvas id="canvasSample" width="640" height="480"></canvas>
		
		<script type="text/javascript">
			onload = function(){
				drawArc();
			};
			
			//绘制圆形方法
			function drawArc(){
				//通过ID获取Canvas元素
				var canvas = document.getElementById("canvasSample");
				
				console.log(!canvas.getContext);
				console.log(canvas.getContext);
				
				//验证canvas元素是否存在，以及浏览器是否支持canvas元素
				if( !canvas || !canvas.getContext ){
					return false;
				}
				
				//创建context对象
				var ctx = canvas.getContext("2d");
				
				//画一个红色的圆
				ctx.save();         //save和restore可以保证样式属性只运用于该段canvas元素
				ctx.beginPath();    //开始路径
				ctx.strokeStyle = "#ff0000";       //设置边线的颜色
				ctx.arc(100, 100, 50, 0, Math.PI * 2, false);      //画一个整圆.
				ctx.stroke();       //绘制边线
				ctx.restore();
			}
		</script>
	</body>
</html>
